<template>
  <div class="topNav">
    <el-row type="flex" justify="space-around">
      <!-- 首页 -->
      <el-col :span="2">
        <div class="grid-content">
          <el-dropdown>
            <span class="el-dropdown-link">
              <nuxt-link to="/home" class="nuxtLink" target="_blank">
                <span class="iconfont icon-nav">&#xe6b8;</span>
                首页
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown" class="disappear"/>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 人体使用指南 -->
      <el-col :span="3">
        <div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link to="/bodyguide" class="nuxtLink" target="_blank">
                <span class="iconfont icon-nav">&#xead2;</span>
                人体使用手册
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <nuxt-link to="/bodyguide/commonsense" class="nuxtLink" target="_blank"
                  >身体常识</nuxt-link
                >
              </el-dropdown-item>
              <el-dropdown-item
                ><nuxt-link to="/bodyguide/habit" class="nuxtLink" target="_blank"
                  >生活习惯</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/bodyguide/guide" class="nuxtLink" target="_blank"
                  >活动指南</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 现代医学篇 -->
      <el-col :span="3"
        ><div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link to="/modernmedical" class="nuxtLink" target="_blank">
                <span class="iconfont icon-nav">&#xe80b;</span>
                现代医学篇
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><nuxt-link to="/modernmedical/guide" class="nuxtLink" target="_blank"
                  >指导思想</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/modernmedical/diagnosis" class="nuxtLink" target="_blank"
                  >诊断方法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/modernmedical/treatment" class="nuxtLink" target="_blank"
                  >治疗方法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/modernmedical/nurse" class="nuxtLink" target="_blank"
                  >康复指南</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 传统医学篇 -->
      <el-col :span="3"
        ><div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link
                to="/traditionalmedical"
                class="nuxtLink"
                target="_blank">
                <span class="iconfont icon-nav">&#xe81d;</span>
                传统医学篇
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><nuxt-link to="/traditionalmedical/guide" class="nuxtLink" target="_blank"
                  >指导思想</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/traditionalmedical/diagnosis" class="nuxtLink" target="_blank"
                  >诊断方法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/traditionalmedical/treatment" class="nuxtLink" target="_blank"
                  >治疗方法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/traditionalmedical/nurse" class="nuxtLink" target="_blank"
                  >养生保健</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 疾病预防 -->
      <el-col :span="3"
        ><div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link to="/prevention" class="nuxtLink" target="_blank">
                <span class="iconfont icon-nav">&#xe634;</span>
                疾病预防篇
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><nuxt-link to="/prevention/commonsense" class="nuxtLink" target="_blank"
                  >预防常识</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/prevention/contagion" class="nuxtLink" target="_blank"
                  >常见传染病</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 心理健康指南 -->
      <el-col :span="3"
        ><div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link to="/psychology" class="nuxtLink" target="_blank">
                <span class="iconfont icon-nav">&#xe61e;</span>
                心理健康指南
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><nuxt-link to="/psychology/commonsense" class="nuxtLink" target="_blank"
                  >心理卫生常识</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/psychology/behavior" class="nuxtLink" target="_blank"
                  >心理行为问题</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/psychology/barrier" class="nuxtLink" target="_blank"
                  >常见心理障碍</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 慢性呼吸道疾病 -->
      <el-col :span="3"
        ><div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link to="/chronicdisease" class="nuxtLink" target="_blank">
                <span class="iconfont icon-nav">&#xe81a;</span>
                常见慢性病分类
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><nuxt-link to="/chronicdisease/chronicrespiratorydisease" class="nuxtLink" target="_blank"
                  >慢性呼吸道疾病</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 传统养生医学 -->
      <el-col :span="3"
        ><div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link to="/traditionalmedicalcare" class="nuxtLink" target="_blank">
                <span class="iconfont icon-nav">&#xe7c3;</span>
                传统医学养生
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><nuxt-link to="/traditionalmedicalcare/diet" class="nuxtLink" target="_blank"
                  >食疗养生</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/traditionalmedicalcare/moxibustion" class="nuxtLink" target="_blank"
                  >艾灸疗法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/traditionalmedicalcare/acupuncture" class="nuxtLink" target="_blank"
                  >针灸疗法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/traditionalmedicalcare/manipulation" class="nuxtLink" target="_blank"
                  >推拿法</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 新冠肺炎防治 -->
      <el-col :span="3"
        ><div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link
                to="/covidControl"
                class="nuxtLink"
                target="_blank">
                <span class="iconfont icon-nav">&#xe753;</span>
                新冠肺炎防治
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><nuxt-link to="/covidcontrol/epidemicinformation" class="nuxtLink" target="_blank"
                  >疫情速报</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/covidcontrol/variety" class="nuxtLink" target="_blank"
                  >病毒变种</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/covidControl/protection" class="nuxtLink" target="_blank"
                  >个人防护</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/covidControl/regionalpolicies" class="nuxtLink" target="_blank"
                  >各地防控</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <!-- 医学前沿 -->
      <el-col :span="2"
        ><div class="grid-content">
          <el-dropdown class="dropdown">
            <span class="el-dropdown-link">
              <nuxt-link to="/medicalleading" class="nuxtLink" target="_blank">
                <span class="iconfont icon-nav">&#xe6e7;</span>
                医学前沿
              </nuxt-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/molecule" class="nuxtLink" target="_blank"
                  >分子医学</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/cell" class="nuxtLink" target="_blank"
                  >细胞医学</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/element" class="nuxtLink" target="_blank"
                  >元素平衡疗法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/information" class="nuxtLink" target="_blank"
                  >信息医学</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/magnetism" class="nuxtLink" target="_blank"
                  >磁场疗法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/light" class="nuxtLink" target="_blank"
                  >光疗法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/nature" class="nuxtLink" target="_blank"
                  >自然疗法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/immunization" class="nuxtLink" target="_blank"
                  >免疫疗法</nuxt-link
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><nuxt-link to="/medicalleading/gene" class="nuxtLink" target="_blank"
                  >基因疗法</nuxt-link
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "TopNav",
};
</script>

<style scoped>
.topNav {
  margin-top: 10px;
  text-align: center;
}
.icon-nav {
  font-size: 24px;
  vertical-align: bottom;
}
.el-dropdown-link {
  cursor: pointer;
  color: #25b6a0;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.nuxtLink {
  font-size: 14px;
  text-decoration: none;
  color: black;
}
.nuxtLink:hover {
  color: #25b6a0;
}
.dropdown {
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.disappear {
  display: none;
}
</style>
